<template>
	<view>
		<view class="select-img">
			<img src="../../static/img1.jpg" alt="" style="width: 100%; height: 100%;">
		</view>
		<view class="no-course" style="width: 100%;height: 110rpx;" v-if="courseList.length == 0">
		      暂无选课信息~
		</view>
		<view class="audition-container" v-else>
		    <view class="audition-content" v-for="(item,index) in courseList" :key="index">
				<view class="title-name">
					<view class="ac-name">{{item.name}} </view>
					<view class="ac-name">{{item.courseName}} </view>
				</view>
				
				<view class="ac-subject">开始时间： <test style="color: #000;">{{item.startTime}}</test> </view>
				 <view class="ac-subject">结束时间：<test style="color: #000;">{{item.stopTime}}</test></view>
				<view class="button" >
					<u-button type="primary" style="width: 200rpx;" @click="applicateBtn(item)">报名</u-button>
				</view>
			</view>
		</view>
		<view class="bottom-tabbar">
			<view class="tab-one">
				<view class="tab-img"><u-icon name="home"></u-icon></view>
				<view class="tab-name">主页</view>
			</view>
			<view class="tab-one">
				<view class="tab-img"><u-icon name="phone"></u-icon></view>
				<view class="tab-name">咨询</view>
			</view>
			
			<view class="tab-one">
				<view class="tab-img"><u-icon name="zhuanfa"></u-icon></view>
				<view class="tab-name">分享</view>
			</view>
			<veiw class="tab-three" style="background-color: #c90d36;"@click="hasSelectOrder">
				查看已报名订单
			</veiw>
		
		</view>
	</view>
</template>

<script>
		import {
			getEventsSetMeal,getEventsMeal,schoolOnSignUp
		} from '@/utils/api.js'
	export default {
		data() {
			return {
				courseList:[]
			}
		},
		onLoad() {
					this.getEventsSetMeal()
					
				},
		methods: {
			hasSelectOrder(){
				uni.navigateTo({
					url:'/pages/my/myApplication'
				})
			},
		async getEventsSetMeal() {
						uni.showLoading()
						const data = {
							// subjectId: this.subjectId
						}
						const res = await getEventsSetMeal(data)
						if (res.code === 200) {
							uni.hideLoading()
							const arr = res.data.map(value=>{
								return{
									...value,
									type:1
								}
							})
							this.courseList.push(...arr)
						}
					const resTwo = await getEventsMeal(data)
					if (resTwo.code === 200) {
						uni.hideLoading()
						console.log("resTwo.data",resTwo.data);
						const arrTwo = resTwo.data.map(value=>{
							return{
								...value,
								type:0
							}
						})
						this.courseList.push(...arrTwo)
					}
					console.log("this.courseList",this.courseList);
					},
					async applicateBtn(item){
						const params = {
							eventsId:item.id,
		                    type:item.type					
						}
						const {
							data,
							code
						} = await schoolOnSignUp(params)
						if (code === 200) {
							uni.showToast({
								title: `报名成功`,
								icon: 'none',
								duration: 2000
							});
						
						
						}
						
						
					},
				}
	}
</script>

<style>
.select-img{
	width: 100%;
	height: 300rpx;
}
.bottom-tabbar {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 100rpx;
		background-color: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
	}

	.tab-one {
		width: 90rpx;
		text-align: center;
	}

	.tab-name {
		margin-top: 8rpx;
	}

	.tab-three {
		width: 250rpx;
		height: 70rpx;
		text-align: center;
		line-height: 70rpx;
		color: #ffffff;
		border-radius: 100rpx;

	}
	.no-course{
		text-align: center;
		margin-top: 200rpx;
		color: #908c8c;
	}
	
	.audition-content{
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 10rpx;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		position: relative;
	}
	.ac-name{
		font-weight: bold;
		font-size: 32rpx;
	}
	.ac-subject{
		color: #aaa8a8;
		margin-top: 10rpx;
	}
	.ac-actime{
		width:100%;
		padding: 8rpx 18rpx;
		margin: 10rpx auto;
		background-color: #f9e6ca;
		color: #ff9800 ;
	}
	.title-name{
		display: flex;
		justify-content: space-between;
	}
	.button{
		margin-top: 20rpx;
		margin-left: 60%;
	}
</style>
